<!--
 * new page
 * @author: zhuangming
 * @since: 2025-02-21
 * dayOrder.vue
-->
<template>
  <view class="container">
    <view>
      <view
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <uni-datetime-picker v-model="selectedDate" type="daterange" />
        <u-button
          style="width: 80px; height: 36px; margin-left: 10px"
          type="primary"
          @click="getDayOrder"
          text="搜索"
        ></u-button>
      </view>
      <view class="order-top">
        <view class="order_top_div">
          <span>商户收入：</span>
          <span>{{ totalPrice }}</span>
        </view>
        <view class="order_top_div">
          <span>商户支出：</span>
          <span>{{ refundTotalPrice }}</span>
        </view>
      </view>
      <view class="order_bot_div">
        <span>平台手续费：</span>
        <span>{{ Number(platformCommissionRate).toFixed(2) }}</span>
      </view>
      <view class="order_list" v-if="orders.length > 0">
        <view
          v-for="(order, index) in orders"
          :key="index"
          class="order_item"
          @click="goDetail(order)"
        >
          <view class="order_item_div">
            <span>订单日期：</span>
            <span>{{ order.dat }}</span>
          </view>
          <view class="order_item_div">
            <span>账期内收入：</span>
            <span>{{ order.totalPrice }}</span>
          </view>
          <view class="order_item_div">
            <span>账期内支出：</span>
            <span>{{ order.refundPrice }}</span>
          </view>
          <view class="order_item_div">
            <span>账户应入账金额：</span>
            <span>{{ Number(order.receivableTotalPrice).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span>平台手续费</span>
            <span>{{ Number(order.platformCommissionRate).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span
              >总共<span style="color: red; margin: 0 5px">
                {{ order.count }} </span
              >笔</span
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { dayOrderIndex } from "../../utils/merorder/mer";

export default {
  data() {
    // 获取当前日期
    const currentDate = new Date();
    // 获取本月的第一天
    const firstDayOfMonth = new Date(
      currentDate.getFullYear(),
      currentDate.getMonth(),
      1
    );
    // 获取本月的最后一天
    const lastDayOfMonth = new Date(
      currentDate.getFullYear(),
      currentDate.getMonth() + 1,
      0
    );

    // 格式化日期为 YYYY/MM/DD
    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}/${month}/${day}`;
    };

    return {
      selectedDate: [formatDate(firstDayOfMonth), formatDate(lastDayOfMonth)], // 默认选中本月第一天和最后一天
      platformCommissionRate: "", //平台手续费
      refundTotalPrice: "", //商户支出
      totalPrice: "", //商户收入
      orders: [
        {
          dat: "",
          platformCommissionRate: "", //平台手续费
          receivableTotalPrice: "", //商户应入账金额
          refundPrice: "", //账期内支出
          totalPrice: "", //商户收入
        },
      ],
    };
  },
  mounted() {
    this.getDayOrder();
  },

  methods: {
    // 查询订单列表
    getDayOrder() {
      const params = {
        dateParam:
          this.selectedDate[0].replace(/-/g, "/") +
          "-" +
          this.selectedDate[1].replace(/-/g, "/"),
        merId: uni.getStorageSync("merId") || 0,
        queryType: "3",
      };
      dayOrderIndex(params).then((res) => {
        this.orders = res.data.ebmerBillVoList;
        this.platformCommissionRate = res.data.platformCommissionRate;
        this.refundTotalPrice = res.data.refundTotalPrice;
        this.totalPrice = res.data.totalPrice;
      });
    },
    // 跳转订单详情
    goDetail(order) {
      uni.navigateTo({
        url: "/pages_sh/myOrder/index-daling?ids=" + order.ids,
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}

.order-top {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
  background-color: #f5f5f5;
}

.order_top_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10px;
}

.order_bot_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10px;
}

.order_list {
  margin-top: 20px;
}

.order_item {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10rpx;
}

.order_item_div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
</style>
